<template>
  <div>
    <h1>App根组件</h1>
    <hr>
<!-- 当安装和配置了vue-router后，就可以使用 router-link 来替代普通的a链接了 -->
    <!-- <a href="#/home">首页</a> -->
    <router-link to="/home" class="link">首页</router-link>

    <!-- <a href="#/movie">电影</a> -->
    <!-- <router-link to="/movie" class="link">电影</router-link> -->

<!-- 动态路由 -->
<!-- 注意1： 在hash地址中，/后面的参数项，叫做路径参数 -->
<!-- 在路由'参数对象'中，需要使用 this.$route.params 来访问路径参数 -->
<!-- 注意2： 在hash地址中， ？ 后面的参数项，叫做 '查询参数' -->
<!-- 在路由'参数对象'中，需要使用 this.$route.query 来访问查询参数 -->
<!-- 注意3： 在this.$route 中，path只是路径部分，fullpath 是完整的地址 -->
    <router-link to="/movie/1?name=zs&age=20" class="link">雷神</router-link>
    <router-link to="/movie/2" class="link">风神</router-link>
    <router-link to="/movie/3" class="link">岩神</router-link>

    <!-- <a href="#/about">关于</a> -->
    <router-link to="/about" class="link">关于</router-link>

    <hr>
    <!-- 配置vue-router，就可以使用router-view组件了，它的作用就是一个占位符 -->
    <router-view></router-view>

    <hr>

    <div class="box">
      <LeftName></LeftName>
      <RightName></RightName>
    </div>
  </div>
</template>

<script>
import LeftName from './components/LeftName.vue'
import RightName from './components/RightName.vue'
export default {
  components: {
    LeftName,
    RightName
  }
}
</script>

<style lang="less" scoped>
.box{
  display: flex;
}
.link{
  margin-left: 15px;
}
</style>
